import React, {useRef, useEffect} from 'react';

import styles from './styles/file-upload.module.css';

const FileInput = function({select}) {

  const fileRef = useRef();

  useEffect(() => () => {
    fileRef.current.value = null;
  })

  const sel = async (e) => {
    
    const {files:[...fileItems]} = e.target;

    select(fileItems);
  }
  
  return <div className={styles['upload-form']}>
    <input className={styles['upload-file-input']} type="file" ref={fileRef} onChange={sel}/>
  </div>
}

export default FileInput;
